<template>
  <ul id="tabs-menu-sub" class="tabs-menu">
    <template v-for="item in state.routerList" :key="item.path">
      <li v-if="isShow(item?.meta)" :class="[{ active: currentPath(item.path) }]" @click="toPage(item)">
        <span>{{ item.title }}</span>
      </li>
    </template>
    <li v-for="item in useTabsRouters" :key="item.path" class="sub-li" :class="[{ active: currentPath(item.path) }]" @click="toPage(item, 'sub')">
      <span>{{ item?.meta?.title }}</span>
      <i class="iconfont icon-close" @click.stop="useDeleteTabs(item.path, state.routerList)"></i>
    </li>
  </ul>
  <div class="tabs-menu-more" v-if="more">
    <a-popover trigger="hover" placement="bottomLeft">
      <template #content>
        <ul class="tabs-menu-more-item">
          <template v-for="(item, index) in useTabsRouters" :key="item.path">
            <li v-if="index >= moreIndex" :class="[{ active: currentPath(item.path) }]" @click="toPage(item)">
              <span class="label ellipse-1" :title="item?.meta?.title">{{ item?.meta?.title }}</span>
              <div>
                <!-- <div class="iconfont-wrap icon-hide" v-if="!hiddenRefreshIcon" :class="{'is-loading-transition': refreshLoading}" @click.stop="handlerRefresh"><i class="iconfont icon-refresh"></i></div> -->
                <div class="iconfont-wrap" @click.stop="useDeleteTabs(item.path, state.routerList)">
                  <i class="iconfont icon-close"></i>
                </div>
              </div>
            </li>
          </template>
        </ul>
      </template>
      <div class="tabs-menu-more-icon"><MoreOutlined /></div>
    </a-popover>
  </div>
</template>
<script setup>
  import { computed, reactive, watch, onActivated } from "vue"
  import { useRouter } from "vue-router"
  import { useTabMenu } from "@/hook/index"
  import { MoreOutlined } from "@ant-design/icons-vue"
  /**
   * state
   */
  const state = reactive({
    routerList: [],
    tabsRouterList: [],
  })
  const tabsRouterList = ref([])

  // hook
  const { isShow, usePushRouter, useDeleteTabs, useTabsRouters, useSetTabMenuName, useShowScrollArrow, more, moreIndex } = useTabMenu({ id: "tabs-menu-sub" })
  /**
   * route
   */
  const router = useRouter()
  /** 路由信息 */
  const routerInfo = () => router.currentRoute.value

  /**
   * 获取子级路由
   */
  const getChildrenRouter = () => {
    const routers = routerInfo().matched?.[1]
    state.routerList = routers?.children || []
  }

  /**
   * 路由跳转
   */
  const toPage = (item, type) => {
    type && useSetTabMenuName(item?.meta?.title)
    router.push(item.path)
  }

  /**
   * 记录path
   */
  const setPathFlag = (path) => {
    routerInfo().matched[0].meta.keepAlivePath = path
    routerInfo().matched[1].meta.keepAlivePath = path
  }

  /**
   * 当前路由高亮
   */
  const currentPath = computed(() => {
    return (path) => routerInfo().path === path
  })

  watch(
    () => router.currentRoute.value,
    (val) => {
      setPathFlag(val.path)
      getChildrenRouter()
      usePushRouter(val)
      useShowScrollArrow()
    },
    {
      immediate: true,
    }
  )
</script>
<style lang="scss" scoped>
  .tabs-menu {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #fff;
    overflow: hidden;
    li {
      position: relative;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #999999;
      cursor: pointer;
      padding: 0 12px;
      white-space: nowrap;
      + li {
        margin-left: 12px;
      }
    }
    li:hover {
      &.active {
        i {
          opacity: 1;
        }
      }
    }
    span {
      white-space: nowrap;
    }
    span + i {
      margin-left: 12px;
    }
    i {
      opacity: 0.3;
      transition: 0.3s;
    }
    .active {
      color: #333;
      span {
        font-weight: bold;
      }
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        border-bottom: 1px solid #333;
      }
    }
  }
  .tabs-menu-more {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tabs-menu-more-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fbfbfb;
    padding: 0 15px;
    height: 100%;
  }
  .tabs-menu-more-item {
    li {
      display: flex;
      align-items: center;
      padding: 3px 12px 3px 16px;
      border-radius: 6px;
      cursor: pointer;
      transition: 0.3s;
      + li {
        margin-top: 4px;
      }
      i {
        opacity: 0.2;
        transition: 0.3s;
      }
    }
    li:hover {
      background-color: #f9f9f9;
      &.active {
        i {
          opacity: 1;
        }
      }
    }
    li.active {
      background-color: #f0f0f0;
    }
    .label {
      max-width: 150px;
      padding-right: 16px;
    }
  }
</style>
